import React, { Component } from "react";
import { Modal, Spin, Button, message, Tabs, Row, Col, Icon } from "antd";
import { openModal, removeContainer } from "components/method/openModal";
import corporatePaymentReportService from "containers/corporate-payment-report/corporate-payment-report.service";
import WaterMark from "components/water-mark";
import { deepFullCopy, messages, queryCurrencyPrecision } from "share/common";
import "styles/loan-billing/debt-modal.scss";

const { TabPane } = Tabs;

class PaymentDebt extends Component {
  state = {
    loading: false,
    modalInfo: {},
    status: "company",
  };

  companyInfo = {};
  setOfBookInfo = {};

  componentDidMount() {
    this.setState({ loading: true });
    const { lineInfo, expenseInfo } = this.props;
    Promise.all([
      corporatePaymentReportService.getPaymentDebt({
        payeeId: lineInfo.payeeId,
        companyOID: expenseInfo.docCompanyOID,
        payeeType: lineInfo.payeeType,
      }),
      corporatePaymentReportService.getPaymentDebt({
        payeeId: lineInfo.payeeId,
        setOfBooksId: expenseInfo.setOfBooksId,
        payeeType: lineInfo.payeeType,
      }),
    ])
      .then((res) => {
        this.companyInfo = (res[0] || {}).data || {};
        this.setOfBookInfo = (res[1] || {}).data || {};
        this.setState({
          modalInfo: (res[0] || {}).data || {},
          loading: false,
        });
      })
      .catch((e) => {
        message.error(e.response.data.message);
      });
  }

  handleTabChange = (value) => {
    this.setState({
      status: value,
      modalInfo: deepFullCopy(value === "company" ? this.companyInfo : this.setOfBookInfo),
    });
  };

  render() {
    const { visible, onCancel, afterClose } = this.props;
    const { loading, status, modalInfo } = this.state;
    return (
      <Modal
        visible={visible}
        onCancel={onCancel}
        afterClose={afterClose}
        className={"debt-modal"}
        title={messages("finance-9.key119") /*预付余额统计*/}
        footer={[<Button onClick={onCancel}>{messages("common.cancel") /*取消*/}</Button>]}
      >
        <Spin spinning={loading}>
          <WaterMark />
          <Tabs defaultActiveKey={status} onChange={this.handleTabChange}>
            <TabPane tab={messages("finance-1.key159") /*当前公司*/} key={"company"} />
            <TabPane tab={messages("finance-1.key160") /*当前账套*/} key={"setOfBook"} />
          </Tabs>
          <div>
            {messages("finance-9.key122") /*总计余额*/}：
            <Icon
              type="info-circle-o"
              className="default-color-font"
              style={{ fontSize: "16px", marginLeft: "10px" }}
            />
            <span style={{ color: "#d0d0d0", marginLeft: "5px" }}>
              {messages("finance-9.key123") /*总计余额包括未核销完的预付和在途未完成支付的预付*/}
            </span>
            <Row style={{ marginTop: "10px" }}>
              {modalInfo.totalLoanAmounts && modalInfo.totalLoanAmounts.length > 0 ? (
                modalInfo.totalLoanAmounts.map((item) => {
                  return (
                    <Col span={8} style={{ fontSize: "16px" }}>{`${item.currencyCode} ${this.filterMoney(
                      item.loanAmount,
                      queryCurrencyPrecision(item.currencyCode),
                      true
                    )}`}</Col>
                  );
                })
              ) : (
                <Col span={24} style={{ textAlign: "center" }}>
                  {messages("finance-9.key124") /*暂无预付*/}
                </Col>
              )}
            </Row>
          </div>
          {modalInfo.loanAmountDetails &&
            modalInfo.loanAmountDetails.map((item) => {
              return (
                <div>
                  <div className={"debt-title"}>
                    <span>{item.loanTypeName}</span>
                  </div>
                  <div style={{ padding: "10px 0px" }}>
                    <Row>
                      <Col span={4}>{messages("finance-9.key125") /*未核销*/}</Col>
                      <Col span={20}>
                        {item.pendingRepaymentLoanAmounts && item.pendingRepaymentLoanAmounts.length > 0 ? (
                          item.pendingRepaymentLoanAmounts.map((item) => {
                            return (
                              <Col span={8}>{`${item.currencyCode} ${this.filterMoney(
                                item.loanAmount,
                                queryCurrencyPrecision(item.currencyCode),
                                true
                              )}`}</Col>
                            );
                          })
                        ) : (
                          <Col span={24}>{messages("finance-9.key124") /*暂无预付*/}</Col>
                        )}
                      </Col>
                    </Row>
                    <Row>
                      <Col span={4}>{messages("finance-9.key129") /*核销中*/}</Col>
                      <Col span={20}>
                        {item.repayingLoanAmounts && item.repayingLoanAmounts.length > 0 ? (
                          item.repayingLoanAmounts.map((item) => {
                            return (
                              <Col span={8}>{`${item.currencyCode} ${this.filterMoney(
                                item.loanAmount,
                                queryCurrencyPrecision(item.currencyCode),
                                true
                              )}`}</Col>
                            );
                          })
                        ) : (
                          <Col span={24}>{messages("finance-9.key124") /*暂无预付*/}</Col>
                        )}
                      </Col>
                    </Row>
                    <Row>
                      <Col span={4}>{messages("finance-1.key170") /*在途：*/}</Col>
                      <Col span={20}>
                        {item.loanAmountsOnTheWay && item.loanAmountsOnTheWay.length > 0 ? (
                          item.loanAmountsOnTheWay.map((item) => {
                            return (
                              <Col span={8}>{`${item.currencyCode} ${this.filterMoney(
                                item.loanAmount,
                                queryCurrencyPrecision(item.currencyCode),
                                true
                              )}`}</Col>
                            );
                          })
                        ) : (
                          <Col span={24}>{messages("finance-9.key124") /*暂无预付*/}</Col>
                        )}
                      </Col>
                    </Row>
                  </div>
                </div>
              );
            })}
        </Spin>
      </Modal>
    );
  }
}

PaymentDebt.open = function (env, props) {
  let container;
  const targetProps = {
    visible: true,
    onCancel: () => close(),
    afterClose: () => {
      removeContainer(container);
      container = null;
    },
    ...props,
  };
  function close() {
    openModal(
      PaymentDebt,
      {
        ...targetProps,
        visible: false,
      },
      env,
      container
    );
  }
  container = openModal(PaymentDebt, targetProps, env);
};

export default PaymentDebt;
